<template>
  <div class="msg">
    <a-row type="flex" class="msg-bhead">
      <a-col :span="2">购买账号</a-col>
    </a-row>
    <a-alert
      message="下单后客服人员会联系您发货，
        超过10分钟未回复是否需要发货，客服将通过电话联系您（为避免打扰您，晚上不外呼电话）。
        此外QQ将作为备用联系方式。请注意及时关注消息、电话和QQ。 请准备一个可以绑定到新账号上的手机号。
        另外，请确保您本人是成年人，否则会影响后续过户。"
      banner
      closable
      style="margin:0 -14px"
    />
    <a-row type="flex" class="information">
      <a-col :span="2">
        <img :src="json.icon" alt />
      </a-col>
      <a-col :span="20">
        <div class="information-n">{{json.title}}</div>
        <div>￥{{json.price}}</div>
        <div class="information-q">{{json.game_name}} {{json.wow}} {{json.twow}}</div>
      </a-col>
    </a-row>
    <a-form
      :form="form"
      class="forms"
      labelAlign="left"
      :labelCol="{span:3}"
      :wrapperCol="{span:8}"
    >
      <a-form-item label="收货区服">
        <a-input placeholder="请填写您要收货的角色名称" v-model="json.wname" disabled />
      </a-form-item>
      <a-form-item label="角色名称">
        <a-input
          placeholder="请填写您要收货的角色名称"
          v-decorator="['name', { rules: [{ required: true, message: '请输入角色名称！' }] }]"
        />
      </a-form-item>
      <a-form-item label="角色等级">
        <a-input
          placeholder="请填写您要收货的角色等级"
          v-decorator="['rank', { rules: [{ required: true, message: '请输入角色等级！' }] }]"
        />
      </a-form-item>
      <a-form-item label="联系手机">
        <a-input
          placeholder="请填写联系手机"
          v-decorator="['phone', { rules: [{ required: true, message: '请输入联系手机！' }] }]"
        />
      </a-form-item>
      <a-form-item label="联系QQ">
        <a-input
          placeholder="请填写联系QQ"
          v-decorator="['qq', { rules: [{ required: true, message: '请输入联系QQ！' }] }]"
        />
      </a-form-item>
      <a-form-item label="支付方式">
        <a-select
          placeholder="请选择支付方式"
          v-decorator="['staues', { rules: [{ required: true, message: '请选择支付方式！' }] }]"
        >
          <a-select-option value="4">余额</a-select-option>
          <a-select-option value="1">支付宝</a-select-option>
          <!-- <a-select-option value="2">微信</a-select-option>
          <a-select-option value="3">银行卡</a-select-option>
          <a-select-option value="5">充值</a-select-option> -->
        </a-select>
      </a-form-item>
      <div class="lines"></div>
      <a-form-item :wrapper-col="{ span: 4, offset: 20 }">
        <div class="all-price">商品总额：¥{{json.price}}</div>
        <div class="new-price">
          支付金额：
          <span>¥{{json.price}}</span>
        </div>
        <a-button type="primary" class="btn" @click="onSubmit">确定</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { GENERATE_ORDER, ADD_ORDER, ZFB_PAYFOR, IS_ZHIFUBAO, BALANCE } from "../../server";
export default {
  layout: "main",
  data() {
    return {
      form: this.$form.createForm(this, {
        name: "buy"
      }),
      json: {}
    };
  },
  created() {
    GENERATE_ORDER({ game_id: this.$route.params.consignbuy }).then(res => {
      if (!res) return;
      this.json = {
        game_id: res.data.game_id,
        wow_de: res.data.wow_de_id,
        title: res.data.title,
        icon: res.data.icon,
        price: res.data.price,
        wow: res.data.wow,
        twow: res.data.twow,
        game_name: res.data.game_name
      };
      this.json.wname = this.json.wow + this.json.twow;
    });
  },
  methods: {
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          ADD_ORDER({
            game_id: this.json.game_id,
            wow_de: this.json.wow_de,
            name: this.form.getFieldValue("name"),
            rank: this.form.getFieldValue("rank"),
            phone: this.form.getFieldValue("phone"),
            qq: this.form.getFieldValue("qq"),
            staues: this.form.getFieldValue("staues")
          }).then(res => {
            if (res.code != 200) {
              this.$message.error(res.msg);
              return;
            } else {
              IS_ZHIFUBAO({
                order_id: res.data
              }).then(zres => {
                if (zres.data == 4) {
                  // 余额支付
                  BALANCE({
                    order_id: res.data
                  }).then(bres => {
                    if (bres.code == 200) {
                      this.$message.success(bres.msg);
                      this.$router.push('/mine/buylist');
                    } else {
                      this.$message.error(bres.msg);
                    }
                  })
                } else if (zres.data == 1) {
                  // 支付宝支付
                  let mid = this.$store.state.member_id
                  window.location.href = `http://php.itemplay.com/pay/alipay/alipay?pay_type=2&order_id=${res.data}&member_id=${mid}`
                }
              })
              // window.open(
              //   `http://php.itemplay.com/pay/alipay/alipay?pay_type=2&order_id=${res.data}&member_id=${mid}`
              // );
            }
          });
        }
      });
    },
    gm() {
      this.$router.push({ name: "game" });
    }
  }
};
</script>
<style lang="less" scoped>
.msg {
  border: 1px solid #e8e8e8;
  padding: 18px;
  .msg-bhead {
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #f6f6f6;
    border-bottom: 1px solid #e8e8e8;
    margin: -18px -18px 4px -18px;
    font-weight: bold;
  }
  .information {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e8e8e8;
    img {
      width: 80px;
      height: 80px;
    }
    .information-n {
      margin-bottom: 14px;
      font-size: 18px;
    }
    .information-q {
      font-size: 12px;
      color: #999;
    }
  }
  .forms {
    margin-top: 24px;

    .y {
      color: #337ab7;
      div:last-child {
        text-align: right;
      }
    }
    .lines {
      border: 1px dashed #e8e8e8;
      margin: 40px 0;
    }
    .all-price {
      height: 38px;
    }
    .new-price {
      height: 36px;
      span {
        color: #0084ff;
        font-size: 16px;
      }
    }
    .btn {
      width: 160px;
      height: 42px;
      color: #fff;
      background: #0084ff;
      border: 0;
      margin-right: 14px;
      margin-top: 20px;
    }
  }
}
</style>